﻿<template>
  <div class="order-status-flow">
    <div class="status-flow-container">
      <div
        v-for="(step, index) in statusSteps"
        :key="step.key"
        class="status-step"
        :class="{
          completed: index < currentStepIndex,
          current: index === currentStepIndex,
          pending: index > currentStepIndex,
        }"
      >
        <div class="step-icon">
          <base-icon :name="step.icon" :size="18" :color="getStepIconColor(index)" />
          <div v-if="index < currentStepIndex" class="checkmark">
            <base-icon name="iconfont-general gen-zhengque" :size="12" color="var(--sc)" />
          </div>
        </div>
        <div class="step-label">{{ step.label }}</div>
        <div v-if="index < statusSteps.length - 1" class="step-connector">
          <div class="connector-line"></div>
          <base-icon name="iconfont ic-xiajiantou1" :size="14" :color="getConnectorColor(index)" />
        </div>
      </div>
    </div>

    <div class="description-toggle" @click="toggleDescription">
      <span>{{ showDescription ? "收起说明" : "展开说明" }}</span>
      <base-icon :name="showDescription ? 'iconfont ic-shangjiantou1' : 'iconfont ic-zuojiantou'" :size="12" />
    </div>

    <div v-if="showDescription" class="status-descriptions">
      <div class="descriptions-container">
        <div
          v-for="(step, index) in statusSteps"
          :key="`desc-${step.key}`"
          class="description-item"
          :class="{
            'description-item-active': index === currentStepIndex,
            'description-item-completed': index < currentStepIndex,
          }"
        >
          <div class="description-content">
            <p v-for="(desc, descIndex) in step.descriptions" :key="descIndex">
              {{ desc }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from "vue";

  const props = defineProps({
    currentStatus: {
      type: String,
      default: "pending_dispatch",
    },
  });

  const showDescription = ref(false);

  const statusSteps = ref([
    {
      key: "pending_dispatch",
      label: "待派单",
      icon: "iconfont ic-daipaidan",
      descriptions: ["还未给任何商家派单，支持将订单派给商家。"],
    },
    {
      key: "pending_review",
      label: "待商家审核",
      icon: "iconfont ic-daishenhe",
      descriptions: [
        "支持审核通过或审核拒绝，审核通过即受理订单服务，拒绝即订单返回平台；",
        "在审核通过之前您是否已完成对订单的风控审核及商品备货等流程。",
      ],
    },
    {
      key: "pending_shipment",
      label: "待发货",
      icon: "iconfont ic-daifahuo",
      descriptions: ["商家可操作发货、关闭订单或帮助用户修改收货地址等操作，", "同时可发起赋强公证服务。"],
    },
    {
      key: "pending_receipt",
      label: "待确认收货",
      icon: "iconfont ic-daishouhuo",
      descriptions: ["商家可修改物流信息、给用户退押金或代用户确认收货等操作。"],
    },
    {
      key: "renting",
      label: "租用中",
      icon: "iconfont ic-zuyongzhong",
      descriptions: ["支持商家提前结算订单或给订单投保等操作，结算后即完成订单。"],
    },
    {
      key: "pending_settlement",
      label: "待结算",
      icon: "iconfont ic-daijiesuanlunkuo",
      descriptions: [
        "租户操作归还商品之后，订单会进入待结算状态；",
        "待结算状态下，商家可操作结算或给用户退押金，",
        "结算后即订单完成，自动退还押金。",
      ],
    },
    {
      key: "completed",
      label: "订单完成",
      icon: "iconfont ic-dingdanwancheng",
      descriptions: ["租户支付完买断金，即订单完成；", "租户到期及时归还租赁商品，商家收货确认无误，即订单完成。"],
    },
  ]);

  const currentStepIndex = computed(() => {
    return statusSteps.value.findIndex(step => step.key === props.currentStatus);
  });

  const toggleDescription = () => {
    showDescription.value = !showDescription.value;
  };

  const getConnectorColor = index => {
    if (index <= currentStepIndex.value) {
      return "var(--bd7)"; // completed - 紫色
    } else {
      return "var(--cb1)"; // pending - 灰色
    }
  };

  const getStepIconColor = index => {
    if (index < currentStepIndex.value) {
      return "var(--bg)"; // completed - 白色
    } else if (index === currentStepIndex.value) {
      return "var(--bg)"; // current - 白色
    } else {
      return "var(--ct4)"; // pending - 灰色
    }
  };
</script>

<style lang="scss" scoped>
  .order-status-flow {
    position: relative;
    background: var(--bg);
    border-radius: 8px;
    padding: 24px;
  }

  .status-flow-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .status-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: 1;

    .step-icon {
      position: relative;
      width: 36px;
      height: 36px;
      line-height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--bg);

      .checkmark {
        background-color: var(--bg);
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .step-label {
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      flex-shrink: 0;
    }

    .step-connector {
      // position: absolute;
      height: 1px;
      display: flex;
      align-items: center;
      z-index: 0;
      flex: 1;

      .connector-line {
        flex: 1;
        height: 1px;
        background: repeating-linear-gradient(
          to right,
          var(--cb1) 0px,
          var(--cb1) 2px,
          transparent 4px,
          transparent 6px
        );
      }
    }

    // 已完成状态
    &.completed {
      .step-icon {
        background: linear-gradient(130.6deg, var(--bd9) 0.82%, var(--bd7) 94.23%);
      }

      .step-label {
        color: var(--ct2);
      }

      .step-connector {
        .connector-line {
          background: repeating-linear-gradient(
            to right,
            var(--bd7) 0px,
            var(--bd7) 2px,
            transparent 4px,
            transparent 6px
          );
        }
      }
    }

    // 当前状态
    &.current {
      .step-icon {
        background: linear-gradient(130.6deg, var(--bd5) 0.82%, var(--bd3) 94.23%);
      }

      .step-label {
        color: var(--ct1);
        font-weight: 500;
      }
      .step-connector {
        .connector-line {
          background: repeating-linear-gradient(
            to right,
            var(--bd7) 0px,
            var(--bd7) 2px,
            transparent 4px,
            transparent 6px
          );
        }
      }
    }

    // 待处理状态
    &.pending {
      .step-icon {
        background: var(--fl1);
      }

      .step-label {
        color: var(--ct3);
      }
    }
  }

  .description-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -5px;
    right: 50%;
    background-color: var(--bg);
    gap: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--bd);
    border-radius: 100px;
    padding: 4px 10px;
    box-shadow: 0px 0px 4px 0px #00000014;
  }

  .status-descriptions {
    padding-top: 16px;
  }

  .descriptions-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    overflow-x: auto;
  }

  .description-item {
    flex: 1;
    min-width: 200px;
    background: var(--fl1);
    border-radius: 4px;
    padding: 10px;
    color: var(--ct3);
    .description-content {
      p {
        font-size: 12px;
        color: var(--ct3);
        line-height: 20px;
      }
    }
  }
  .description-item-active {
    background: var(--bd9);
  }

  .description-item-completed {
    background: #f4f0ff80;
  }
</style>
